<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<!--评论盖楼-->
									<div class="WB_feed_repeat S_bg1 WB_feed_repeat_v3">
										<div class="WB_repeat S_line1 commentAll">
											<!--评论-发表-->
											<div class="WB_feed_publish clearfix">
												<div class="WB_face W_fl"><img src="/common/img/xiuli/default_avatar_female_50.gif" alt=""></div>
												<div class="WB_publish">
													<div class="p_input">
														<textarea class="W_input view" action-type="check"  placeholder="请输入&hellip;" onkeyup="keyUP(this)"
														
														cols="" rows="" name="" node-type="textEl" style="overflow: hidden; margin: 0px; padding: 5px 2px 0px 6px; border-style: solid; border-width: 0.916667px; font-size: 12px;
														 overflow-wrap: break-word; line-height: 18px; outline: medium none currentcolor; height: 33px;position:relative;
														 width: 510px;left:0px;top:-5px;"></textarea>
													</div>
													<div class="p_opt clearfix" node-type="widget">
														<div class="btn W_fr comment-btn">
															<a class="W_btn_a W_btn_a_disable plBtn" action-type="post" href="javascript:void(0);" onclick="return false" node-type="btnText">评论</a>
														</div>
														<div class="opt clearfix">
															<span class="ico">
										                        <a href="javascript:;" node-type="smileyBtn" title="表情" alt="表情">
										                       		<i class="icon icon-smile"></i>
										                        </a>
										                             &nbsp;  &nbsp;
                                                             <a node-type="imgBtn" href="javascript:void(0);" style="cursor:default;" title="">
                                                             	<i class="icon icon-picture"></i>
                                                             </a>
                                                          </span>
															<ul class="ipt">
																<li>
																	<label for="forword_4405177995816321" class="W_label">
										                                <input id="forword_4405177995816321"  class="W_checkbox" name="forward" type="checkbox">
										                                <span>同时转发到我的微博</span>
										                            </label>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<!--评论-发表2-->
											<div class="repeat_list">
												<!-- 列表-标题 -->
												<div class="tab_feed_a clearfix S_line1">

													<div class="tab">
														<ul class="clearfix">
															<li><span class="line S_line1">
													                 <a href="javascript:void(0)" action-type="feed_list_commentSearch" class="S_txt1 curr">按热度</a>
													               </span>
															</li>
															<li><span class="line S_line1">
											                    	<a node-type="feed_list_commentTabAll" href="javascript:void(0)" action-type="feed_list_commentSearch" class="S_txt1">按时间</a>
											                    </span>
															</li>
														</ul>
													</div>
												</div>
												<!-- 列表-标题 -->
												<!--  评论 列表-内容 -->
											
												<div class="list_box">
													<div class="list_ul" node-type="feed_list_commentList">
														<c:forEach items="${firstList}" var="comment" begin="0" end="5">
														<!-- 一级评论 -->
														<div  node-type="root_comment" comment_id="${comment.commentId}" commentWeiboid="${comment.weiboId}" class="list_li S_line1 clearfix commented-id">
															<!-- 评论头像 -->
															<div class="WB_face W_fl">
																<a target="_blank" href="#">
																	<img src="http://localhost:8082/serverpath${comment.user.userHeadpath}"></a>
															</div>
															<!-- 评论头像 -->
															<!-- 评论用户信息及评论内容 -->
															<div class="list_con" node-type="replywrap">
																<div class="WB_text">
																	<a target="_blank" href="#" class="comment-size-name" userID="${weibo.user.userId}">${comment.user.userName} </a>：${comment.commentContent}</div>
																<!-- 评论图片的处理 -->
																<div class="WB_expand_media_box" style="display: none;" node-type="comment_media_disp"></div>
																<!-- 评论图片的处理 -->
																<!-- 对评论的操作 -->
																<div class="WB_func clearfix">
																	<div class="WB_handle W_fr">
																		<ul class="clearfix">
																			<!-- 投诉 -->
																			<li class="hover">
																				<span class="line S_line1">
																					<a class="S_txt1" href="javascript:void(0);">投诉</a>
																				</span>
																			</li>
																			<!-- 投诉 -->
																			<!-- 屏蔽 -->
																			<li class="hover">
																				<span class="line S_line1">
																					<a class="S_txt1" action-type="shieldComment"  href="javascript:void(0);">
																					屏蔽</a>
																				</span>
																			</li>
																			<!-- 屏蔽 -->
																			<!-- 删除 -->
																			<!-- 删除 -->
																			<!-- 查看对话 -->
																			<!-- 查看对话 -->
																			<!-- 回复 -->
																			<li>
																				<span class="line S_line1 hf-con-block reply">
																					<a href="javascript:void(0);" class="S_txt1" onclick="return false" action-type="reply" >回复</a>
																				</span>
																				<span class="arrow">
																					<span class="W_arrow_bor W_arrow_bor_t"><i class="S_bg2_br"></i></span>
																				</span>
																			</li>
																			<!-- 回复 -->
																			<!-- 赞 -->
																			<li><span class="line S_line1">
                                                                              <a href="javascript:void(0)" class="S_txt1" action-type="fl_like" >
                                                                              	<span node-type="like_status" class="">
                                                                              		<i class="icon icon-thumbs-o-up"></i>
                                                                              		<em>${comment.commentZannum}</em>
                                                                              	</span>
																				</a>
																				</span>

																			</li>
																			<!-- 赞 -->
																		</ul>
																	</div>
																	<!-- 时间 -->
																	<div class="WB_from S_txt2">${comment.commentTime}</div>
																	<!-- 时间 -->
																</div>
																<!-- 二级评论 -->
																<!-- 如果返回的为空，但是有二级评论 -->
																<!-- 如果返回的为空，但是有二级评论 -->
																<!-- 如果返回有二级评论 -->
																<!-- 为评论假写留下二级评论的样式框架评论 -->
																<!-- 为评论假写留下二级评论的样式框架评论 -->
																
																
																<c:forEach items="${comment.commentlist}" var="replyComment">
																<div class="list_box_in S_bg3">
																	<div class="list_ul" node-type="child_comment">
																		<div comment_id="" class="list_li S_line1 clearfix">
																			<!-- 评论用户信息及评论内容 -->
																			<div class="list_con">
																				<div class="WB_text">
																					<a target="_blank" href="#" >${replyComment.user.userName}</a>
																					：
																					<!--用户的内容是图片-->
																					  ${replyComment.commentContent}
						                                                              	</div>
																				<!-- 评论图片的处理 -->
																				<div class="WB_expand_media_box" style="display: none;" node-type="comment_media_disp"></div>
																				<!-- 评论图片的处理 -->
																				<!-- 对评论的操作 -->
																				<div class="WB_func clearfix">
																					<div class="WB_handle W_fr">
																						<ul class="clearfix">
																							<!-- 投诉 -->
																							<li class="hover"><span class="line S_line1"><a class="S_txt1" href="javascript:void(0);">投诉</a></span></li>
																							<!-- 投诉 -->
																							<!-- 屏蔽 -->
																							<li class="hover">
																								<span class="line S_line1">
																								<a class="S_txt1" action-type="shieldComment" action-data="" href="javascript:void(0);">屏蔽</a>
																								</span>
																							</li>
																							<!-- 屏蔽 -->
																							<!-- 删除 -->
																							<!-- 删除 -->
																							<!-- 查看对话 -->
																							<li class="hover">
																								<span class="line S_line1">
																									<a class="S_txt1" href="javascript:void(0);" action-data="" action-type="commentDialogue">查看对话</a>
																								</span>
																							</li>
																							<!-- 查看对话 -->
																							<!-- 回复 -->
																							<li>
																								<span class="line S_line1 reply ">
																									<a href="javascript:void(0);" class="S_txt1" onclick="return false" action-type="reply">回复</a>
																								</span>
																								<span class="arrow">
																									<span class="W_arrow_bor W_arrow_bor_t">
																										<i class="S_bg2_br"></i>
																									</span>
																								</span>
																							</li>
																							<!-- 回复 -->
																							<!-- 赞 -->
																							<li>
																								<span class="line S_line1">
                                                                                                <a href="javascript:void(0)" class="S_txt1" action-type="fl_like" title="赞">
                                                                                                	<span node-type="like_status" class="">             
                                                                                                      <i class="icon icon-thumbs-o-up"></i>                              
                                                                                                         	<em>${replyComment.commentZannum}</em></span></a>
																								</span>
																							</li>
																							<!-- 赞 -->
																						</ul>
																					</div>
																					<!-- 时间 -->
																					<div class="WB_from S_txt2"> ${replyComment.commentTime}</div>
																					<!-- 时间 -->
																				</div>
																			</div>
																		</div>
																		<!-- 用于作为插入更多二级评论的锚点 -->
																		<!-- 用于作为插入更多二级评论的锚点 -->
																		<!-- 二级评论查看更多 -->
																		
																		<div class="between_line S_bg1" node-type="comment_line"></div>
																		<!-- 二级评论查看更多 -->
																	</div>
																</div>
																</c:forEach>
																<!-- 如果返回有二级评论 -->
																<!-- 二级评论 -->
																<!-- 对一级评论的操作 -->
															</div>
															<!-- 一级评论用户信息及评论内容 -->
														</div>
														 </c:forEach>
														<!-- 一级评论 -->
													
													
														<a target="_blank" href="#" class="WB_cardmore WB_cardmore_v2 S_txt1 S_line1 clearfix">
															<span class="more_txt">查看更多
																<i class="icon icon-chevron-right"></i></span></a>
													</div>
													<!-- 列表-内容 -->
												</div>
                                               
												<!-- 评论-列表 -->
											</div>
										</div>
                                       
									</div>
									<!--结-->
									<!--点击回复动态创建回复块-->
  <script type="text/javascript">
  	$(document).on('click','.reply',function(){
  		
  		
    	// $(this).removeClass('hf-con-block');
        //获取回复人的名字
   var fhName = $(this).parents('.WB_func').siblings('.WB_text').find('.comment-size-name').html();
        //alert(fhName);
        //回复@
        var fhN = '回复@'+fhName;
        var fhHtml = '<div class="WB_publish replayTxt" style="margin-left:0px;">'
			+'<div class="p_input">'
			+'<div class="flex-text-wrap"><textarea class="W_input view borderColor" action-type="check" placeholder="请输入…" onkeyup="keyUP(this)" cols="" rows="" name="" node-type="textEl" style="overflow: hidden; margin: 0px; padding: 5px 2px 0px 6px; border-style: solid; border-width: 0.916667px; font-size: 12px;'
			+'overflow-wrap: break-word; line-height: 18px; outline: medium none currentcolor; height: 33px;position:relative;width: 470px;left:0px;top:-35px;"></textarea></div>'

			+'</div>'
			+'<div class="p_opt clearfix" node-type="widget">'
			+'	<div class="btn W_fr replyAgain">'
			+'<a class="W_btn_a " action-type="post" href="javascript:void(0);" node-type="btnText">评论</a>'
			+'</div>'
			+'<div class="opt clearfix">'
			+'<span class="ico">'
			+'  <a href="javascript:;" node-type="smileyBtn" title="表情" alt="表情"> '
			+'	<i class="icon icon-smile"></i>'
			+'  </a>'
			+'    &nbsp;  &nbsp;'
			+' <a node-type="imgBtn" href="javascript:void(0);" style="cursor:default;">'
			+'	<i class="icon icon-picture"></i>'
             	+' </a>'
             	+' </span>'
             	+'	<ul class="ipt">'
             	+'<li>'
             	+'<label  class="W_label">'
					+'       <input  class="W_checkbox" name="forward" type="checkbox">'
					+'   <span>同时转发到我的微博</span>'
					+' </label>'
					+'</li>'
					+'</ul>'
					+'</div>'
					+'</div>'
					+'</div>';
      //  alert(fhHtml);
        //显示回复
        if($(this).is('.hf-con-block')){
        	 $(this).parents('.WB_func').append(fhHtml);
           $(this).removeClass('hf-con-block');
           $('.view').flexText();
          //  $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
           $(this).parents('.WB_handle').siblings('.replayTxt').find('.view').val('').focus().val(fhN);
    }else {
           $(this).addClass('hf-con-block');
          $(this).parents('.WB_handle').siblings('.replayTxt').remove();
   }
    });
</script>

<!--评论回复块创建-->
   <script type="text/javascript">
   $(document).on('click','.replyAgain',function(){
	   var oThis = $(this);
       var myDate = new Date();
       //获取当前年
       var year=myDate.getFullYear();
       //获取当前月
       var month=myDate.getMonth()+1;
       //获取当前日
       var date=myDate.getDate();
       var h=myDate.getHours();       //获取当前小时数(0-23)
       var m=myDate.getMinutes();     //获取当前分钟数(0-59)
       if(m<10) m = '0' + m;
       var s=myDate.getSeconds();
       if(s<10) s = '0' + s;
       var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
     //获取输入内容
       var oHfVal = $(this).parents('.p_opt').siblings('.p_input').find('.view').val();
      
       //当前用户的名字
       var username=$('.user').val();
       //被回复者的名字
       var oHfName = $(this).parents('.p_opt').parent().parent().siblings('.WB_text').find('.comment-size-name').html();
       //ajax传参回复评论
       var weiboid = $('.commented-id').attr("commentWeiboid");
       var commentedid= $('.commented-id').attr("comment_id");
      
       
	     $.post("/CommentPage/savecomment",
		{"content":oHfVal,"wbid":weiboid,"commentedID":commentedid},
		function(data){
			console.log(data);
		}
	    );
       var oAllVal = '回复@'+oHfName;
          //var oHtml='<div class="" style="width:300px;height:50px; background-color:white;">123</div>';
           var oHtml='<div  class="list_li S_line1 clearfix">'
				<!-- 评论用户信息及评论内容 -->
				+'<div class="list_con">'
				+'<div class="WB_text">'
				+'<a target="_blank" href="#">'+username+'</a>'
					+'：'	
						<!--用户的内容是图片-->	
					+oHfVal
						+'</div>'
					<!-- 评论图片的处理 -->
					+'<div class="WB_expand_media_box" style="display: none;" node-type="comment_media_disp"></div>'
					<!-- 评论图片的处理 -->
					<!-- 对评论的操作 -->
					+'<div class="WB_func clearfix">'
					+'<div class="WB_handle W_fr">'
					+'<ul class="clearfix">'
								<!-- 投诉 -->
								+'<li class="hover"><span class="line S_line1"><a class="S_txt1" href="javascript:void(0);">投诉</a></span></li>'
								<!-- 投诉 -->
								<!-- 屏蔽 -->
								+'	<li class="hover">'
								+'<span class="line S_line1">'
								+'	<a class="S_txt1" action-type="shieldComment"  href="#">屏蔽</a>'
								+'</span>'
								+'</li>'
								<!-- 屏蔽 -->
								<!-- 删除 -->
								<!-- 删除 -->
								<!-- 查看对话 -->
								+'<li class="hover">'
								+'<span class="line S_line1">'
								+'	<a class="S_txt1" href="javascript:void(0);" action-type="commentDialogue">查看对话</a>'
								+'</span>'
								+'</li>'
								<!-- 查看对话 -->
								<!-- 回复 -->
								+'<li>'
								+'<span class="line S_line1 reply">'
								+'<a href="javascript:void(0);" class="S_txt1" onclick="return false" action-type="reply">回复</a>'
								+'</span>'
								+'<span class="arrow">'
								+'	<span class="W_arrow_bor W_arrow_bor_t">'
								+'	<i class="S_bg2_br"></i>'
								+'	</span>'
								+'</span>'
								+'</li>'
								<!-- 回复 -->
								<!-- 赞 -->
								+'<li>'
								+'<span class="line S_line1">'
								+'  <a href="javascript:void(0)" class="S_txt1" action-type="fl_like" title="赞">'
								+' 	<span node-type="like_status" class="">'     
								+'    <i class="icon icon-thumbs-o-up"></i> '                          
								+'  	<em>2</em></span></a>'
                                            	+'</span>'
                                            	+'</li>'
								<!-- 赞 -->
								+'</ul>'
								+'</div>'
						<!-- 时间 -->
						+'<div class="WB_from S_txt2">'+now+'</div>'
						<!-- 时间 -->
						+'</div>'
						+'</div>'
						+'	</div>';
	
			 $(this).parent().parent().parent().next().find('.list_ul[node-type="child_comment"]').prepend(oHtml)&&$(this).parents('.replayTxt').remove();
			// $(this).parents('.o_opt').parents('.WB_func').siblings('.list_box_in').find('.list_ul[node-type="child_comment"]').prepend(oHtml);
   });
</script>
							</body>
							</html>